<template>
  <div class="barinner">
    <v-chart :auto-resize="true" @click="clickEcha" :options="newOption" />
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import lodash from "lodash";
import { log } from "three";
import date from '@/utils/date';
@Component
export default class extends Vue {
  @Prop() stationID?: any[];
  option = {
    tooltip: {
      trigger: "axis",
    },
    grid: {
      left: 20,
      right: 20,
      bottom: 10,
      top: 40,
      containLabel: true,
    },
    legend: {
      top: 10,
      right: 80,
      textStyle: {
        color: "#fff",
      },
      data: ["正常", "告警"],
    },
    xAxis: {
      type: "category",
      data: [],
      axisLine: {
        lineStyle: {
          color: "rgba(12, 175, 232,0.8)",
        },
      },
      axisLabel: {
        interval: 0,
        color: "#fff",
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      name: "数量（条）",
      nameTextStyle: {
        color: "#fff",
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        color: "#fff",
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(12, 175, 232,0.8)",
        },
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        type: "bar",
        name: "正常",
        barMaxWidth: "50",
        barGap: 0, //柱间距离
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#38F7F2",
              },
              {
                offset: 1,
                color: "#264C9C",
              },
            ],
          },
        },
        data: [0],
      },
      {
        type: "bar",
        name: "告警",
        barMaxWidth: "50",
        barGap: 0, //柱间距离
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#FF8E1C",
              },
              {
                offset: 1,
                color: "#8E4B07",
              },
            ],
          },
        },
        data: [0],
      },
    ],
  };
  get newOption() {
    let option = lodash.cloneDeep(this.option);
    let xAxis = [];
    let data = [];
    let data2 = [];
    this.barData.forEach((v) => {
      xAxis.push(v.SYSNAME);
      data.push(v.COUNT);
      data2.push(v.YCOUNT);
    });
    option.xAxis.data = xAxis;
    option.series[0].data = data;
    option.series[1].data = data2;
    return option;
  }
  mounted() {
    this.fetch();
  }
  barData = [];

  @Watch("stationID", { immediate: true, deep: true })
  setStationID(newD) {
    this.barData = [];
    let params = { station: newD };
    (this as any).$services
      .getFkCount({ data: params })
      .then((result: any) => {
        this.barData = result.data || [];
        // console.log('重新调用了',result.data);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  fetch() {
    (this as any).$services
      .getFkCount()
      .then((result: any) => {
        this.barData = result.data || [];
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  clickEcha(val) {
    this.$emit("clickEcha", val);
  }
}
</script>

<style lang="scss" scoped>
.barinner {
  width: 100%;
  height: 100%;
  .echarts {
    width: 100%;
    height: 100%;
  }
}
</style>

